@import "_function";
@import "common";

body{
  .bc(#f8e5ff);
}
header{
  .bc(#cf4cff);
  .p(0,30,0,30);
  .w(690);
  .oh();
  .scan{
    .fl();
    background-image: url("../img/zuo_03.png");
    width: 30px;
    height: 46px;
    .w(30);
    .h(46);
    .bgs(30,46);
    .m(24,0,18,8);
  }
  form{
    .w(500);
    .oh();
    .fl();
    .bdr(25);
    .h(50);
    .m(18,42,18,56);
    .bc(#fff);
    input{
      outline: none;
      .fl();
      .bn();
      .lh(50);
      .h(50);
      .w(430);
      .bc(#fff);
      .ti(38);
      .fs(26);
      .c(#616161);
    }
    button{
      .fl();
      background: url("../img/home_search_btn_06.png") transparent;
      .w(30);
      .h(30);
      .bs(30,30);
      .bn();
      .mt(10);
    }
  }
  .message{
    .fl();
    background-image: url("../img/home_message.png");
    .w(42);
    .h(70);
    .bgs(42,70);
    .mt(9);
  }
}
.nav{
  .bc(#cf4cff);
  .w(690);
  .p(0,30,0,30);
  .oh;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  li{
    .lh(40);
    .p(0,10,0,10);
    .fs(28);
    .c(#faedff);
    .bdr(8);
  }
  .on{
    .bc(#a441ff);
  }

}
.sear_below{
    .p(0,30,0,30);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    li{
      .w(200);
      .h(228);
      border: 1px solid #666666;
      .m(30,0,10,0);
      a{
       img{
         .w(200);
         .h(180);
       }
       h3{
         .fs(24);
         .c(#333333);
         .db();
         .tc();
       }
     }
    }
  }
footer{
  .bc(#ebb2ff);
  .w(690);
  .db();
  .h(98);
  .pf();
  bottom: 0;left: 0;
  .p(0,30,0,30);
  .option1 i{
    background: url("../img/order_f_index.png")no-repeat;
    .w(52);
    .h(46);
    .bgs(52,46);
  }
  .option2 i{
    background: url("../img/class_f_index.png")no-repeat;
    .bgs(46,46);
    .w(46);
    .h(46);
  }
  .option3 i{
    background: url("../img/home_f_shopcart.png")no-repeat;
    .bgs(51,46);
    .w(51);
    .h(46);
  }
  .option4 i{
    background: url("../img/home_f_user.png") no-repeat;
    .bgs(41,46);
    .w(41);
    .h(46);
  }
  .option1,.option2,.option3,.option4{
    .fl();
    .w(78);
    .mt(8);
    i{
      .db();
      margin: 0 auto;
    }
    b{
      .db();
      .tc();
      .lh(24);
      .w(78);
      .fs(20);
      .mt(10);
      .c(#333333);
    }
  }
  div~div{
    .ml(126);
  }


}